<template>
    <div style="height:100%;width:100%;position:relative;">
        <div class="pagetop">
            <div class="top-title">快速查询</div>
            <el-input v-model="txtsearch" placeholder="计划策略代码|名称|输入码" @keyup.enter.native="filterQuery" style="width:240px"></el-input>
            <div class="top-button">
                <el-button @click="btnQuery" icon="el-icon-search" type="primary" v-has="'PINQUERY'" :disabled="bChangeFlag">查询</el-button>
                <el-button @click="btnAdd" icon="el-icon-plus" v-has="'PADD'" :disabled="bChangeFlag">新增</el-button>
                <el-button @click="btnDel" icon="el-icon-delete" v-has="'PDELETE'" :disabled="bChangeFlag">删除</el-button>
                <el-button @click="btnSave" icon="el-icon-document" v-has="'PMODIFY'" :disabled="!bChangeFlag">保存</el-button>
                <el-button @click="btnClear" icon="el-icon-close" :disabled="!bChangeFlag">取消</el-button>
                <el-button @click="btnExport" icon="el-icon-upload2" :disabled="bChangeFlag">导出</el-button>
            </div>
        </div>
        <div class="pagecenter">
            <rm-layout-right splitcolor="#DoderBlue" movingcolor="#CCFFFF" :splitwidth="5" :fixsize="430">
                <template v-slot:fix>
                    <div v-loading="bPageInitLoading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" style="height:100%">
                        <rm-layout-top splitcolor="#DoderBlue" movingcolor="#CCFFFF" :splitwidth="5" :fixsize="195" :canDrag="false">
                            <template v-slot:fix>
                                <div style="height:195px;border:1px solid #CCC">
                                    <el-form :label-position="labelPosition" label-width="80px" :model="detailData" :disabled="!havedata">
                                        <table class="table1style" style="width:100%;font-size:12px">
                                            <tr>
                                                <td align="right" style="color:#F56C6C">计划策略代码</td>
                                                <td>
                                                    <!-- @change="ChkKeyId" :readonly="actionindex == 'M'"-->
                                                    <el-input v-model="detailData.chargecode" @input="HasChange" ref="input0" @keyup.enter.native="NextFocus(0)"></el-input>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td align="right" style="color:#F56C6C">计划策略名称</td>
                                                <td>
                                                    <el-input v-model="detailData.chargename" @input="HasChange" @change="CreateInputcode" ref="input1" @keyup.enter.native="NextFocus(1)"></el-input>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td align="right">输入码</td>
                                                <td>
                                                    <el-input v-model="detailData.inputcode" @input="HasChange" ref="input2" @keyup.enter.native="NextFocus(2)"></el-input>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td align="right">病人所属医院</td>
                                                <td>
                                                    <rm-ddl-common datatype="hospital" dataname="医院" v-model="detailData.hospcode" width="100%" ref="input3" @keyup.enter.native="NextFocus(3)"></rm-ddl-common>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td align="right">备注</td>
                                                <td colspan=3>
                                                    <el-input type="textarea" :rows="3" v-model="detailData.description" ref="input4" @keyup.enter.native="NextFocus(4)" @focus="Focus($event)" @input="HasChange"></el-input>
                                                </td>
                                            </tr>
                                        </table>
                                    </el-form>
                                </div>
                            </template>
                            <div style="height:100% ;width:100%;background-color:#ddccbb;" class="detailxTable">
                                <vxe-table :data="rXTableData" :loading="bLoading" :keyboard-config="selKeyConfig" :keyboard-local-config="selKeyLocalConfig" :select-config="selectConfig" :sort-config="{trigger: 'cell'}" :edit-config="{
                trigger: 'click',
                mode: 'cell',
                showStatus: true,
                activeMethod: ActiveMethod,
                showIcon: false,
              }" :edit-rules="validRules" border fit height="auto" header-align="center" highlight-current-row highlight-hover-row highlight-hover-column ref="rXTable" resizable size="mini" stripe :row-class-name="rRowClassName" :cell-class-name="rCellClassName" :edit-closed="rEditClosed" :mouse-config="{selected: true}" show-header-overflow="tooltip" show-overflow="tooltip">
                                    <vxe-table-column field="req_item" title="申请项目(双击弹窗)" width="180" :edit-render="{name: 'input',autoselect: true,}">
                                        <template v-slot:header="{}">
                                            <span style="color:#F56C6C;">申请项目(双击弹窗)</span>
                                        </template>
                                        <template v-slot:edit="{row}">
                                            <el-input v-model="row.req_item" style="width:100%" placeholder="" @keyup.space.native="popGetRow(row);" @dblclick.native="popGetRow(row)" readonly>
                                            </el-input>
                                        </template>
                                    </vxe-table-column>
                                    <vxe-table-column field="chargedept" title="计价科室" width="80" :edit-render="{
                  name: 'select',
                  options:chargeDeptOptions,
                  events:{change:(row,val) => {row.row.chargedept = val.target.value;HasChange()}},
                }"> <template v-slot:header="{}">
                                            <span style="color:#F56C6C;">计价科室</span>
                                        </template></vxe-table-column>
                                    <vxe-table-column field="qty" title="数量" width="50" sortable :edit-render="{name:'input', autoselect: true,events:{change:(row,val) => {row.row.qty = val.target.value;HasChange()}},}" align="right" header-align="center"> <template v-slot:header="{}">
                                            <span style="color:#F56C6C;">数量</span>
                                        </template>
                                    </vxe-table-column>
                                    <vxe-table-column field="seq" title="序号" width="40" align="center" :edit-render="{
                  name: 'input',
                  autoselect: true,
                  events: {change: HasChange},
                }"><template v-slot:header="{}">
                                            <span style="color:#F56C6C;">序号</span>
                                        </template></vxe-table-column>
                                    <template v-slot:fix>
                                        <div style="font-size:17px;padding:3px;background-color:#fff;text-align:center;font-weight:bold">
                                            <el-button @click="btnDetailAdd()" class="el-button--310" :disabled="!havedata">新增明细</el-button>
                                            <el-button @click="btnDetailDel()" class="el-button--310" :disabled="!havedata">删除明细</el-button>
                                        </div>
                                    </template>
                                </vxe-table>
                            </div>
                        </rm-layout-top>
                    </div>
                </template>
                <div style="height:100%">
                    <vxe-table :data.sync="showLXTableData" :loading="bLoading" :keyboard-local-config="keyLocalConfig" :row-class-name="lRowClassName" :select-config="selectConfig" :sort-config="{trigger: 'cell'}" :edit-config="{
            trigger: 'click',
            mode: 'cell',
            showStatus: true,
            showIcon: false,
          }" @current-change="CurrentChangeEvent" border fit height="auto" header-align="center" highlight-current-row highlight-hover-row highlight-hover-column ref="lXTable" resizable size="mini" stripe show-header-overflow="tooltip" show-overflow="tooltip">
                        <vxe-table-column field="chargecode" title="计价策略代码" width="120"></vxe-table-column>
                        <vxe-table-column field="chargename" title="计价策略名称" width="160"></vxe-table-column>
                        <vxe-table-column field="description" align="center" title="备注说明" width="200"></vxe-table-column>
                        <vxe-table-column field="inputcode" title="输入码" width="120"></vxe-table-column>
                        <vxe-table-column field="chargeid" title="ID" width="40" align="center"></vxe-table-column>
                    </vxe-table>
                </div>
            </rm-layout-right>
            <el-dialog v-el-drag-dialog :append-to-body="true" :close-on-click-modal="false" title="申请项目选择" :visible.sync="bPopReqItem" v-if="bPopReqItem" :keyboard-local-config="keyLocalConfig">
                <rm-pop-common @change="ReqItemRowChange" @cancel="bPopReqItem = false" datatype="reqitem"></rm-pop-common>
            </el-dialog>
        </div>
    </div>
</template>

<script type="text/javascript">
import XEUtils from "xe-utils";
export default {
    name: "MNG236",
    data() {
        return {
            txtsearch: "",
            actionindex: "M",
            labelPosition: "right",
            bLoading: false,
            bChangeFlag: false,
            bPopReqItem: false,
            bPageInitLoading: false,
            selKeyConfig: {
                isDel: true,
                isTab: true,
                isEdit: true,
            },
            selKeyLocalConfig: {
                isArrow: true,
            },
            keyLocalConfig: {
                isDel: true,
                isTab: true,
                isEdit: true,
                isArrow: true,
            },
            detailData: {
                chargeid: null,
                req_itemcode: "",
                req_item:"",
                chargedept: "",
                qty: 0,
                seq: 0,
            },
            selectConfig: { tigger: "row" },
            reqItemRow: {},
            tempreqitem: {},
            tmpdetailData: {},
            selrow: [],
            AddData: [], //新增数据 用于变色
            ModData: [], //修改数据 用于变色
            lXTableData: [],
            rXTableData: [],
            showLXTableData: [],
            chargeDeptOptions: [
                { value: "1", label: "执行科室" },
                { value: "2", label: "开单科室" },
                { value: "3", label: "病人病区" },
            ],
            validRules: {
                chargedept: [{ required: true, message: "必须填写" }],
                req_itemcode: [{ required: true, message: "必须选择" }],
                qty: [{ required: true, message: "必须填写,0表示按采血次数计价" }],
                seq: [{ required: true, message: "必须填写" }],
            },
            havedata: false,
        };
    },
    created() {
        this.btnQuery();
    },
    computed: {
        //排序
        autoSeq() {
            let len = this.$refs.rXTable.tableData.length;
            return (len + 1) * 10;
        },
    },
    methods: {
        //----------------- 查询类 ----------------- //
        //主表查询
        filterQuery() {
            let filterName = this.txtsearch.trim();
            if (filterName) {
                let rest = this.lXTableData.filter((item) => {
                    return item.chargecode.toUpperCase().indexOf(filterName.toUpperCase()) > -1 || (item.inputcode ? item.inputcode.toUpperCase().indexOf(filterName.toUpperCase()) > -1 : false) || (item.chargename ? item.chargename.toUpperCase().indexOf(filterName.toUpperCase()) > -1 : false);
                });
                this.showLXTableData = rest;
            } else {
                this.showLXTableData = this.lXTableData;
            }
            let row = this.showLXTableData[0];
            if (row) {
                this.HightLightRow(row);
            } else {
                this.HightLightRow(false);
            }
        },
        btnQuery() {
            this.AddData = [];
            this.ModData = [];
            this.bLoading = true;
            this.$tool
                .request({
                    url: "MNG/MNG2/MNG236",
                    method: "post",
                    data: {
                        action: "his_chargerule_query",
                    },
                })
                .then((res) => {
                    if (res.data) {
                        this.lXTableData = res.data;
                        this.filterQuery();
                        if (this.lXTableData.length == 0) this.actionindex = "A";
                    }
                    this.bLoading = false;
                })
                .catch((e) => {
                    this.ErrorCatch(e, "", "error");
                    this.bLoading = false;
                });
        },
        //明细查询 -- 主表，子表
        async detailQuery(row) {
            try {
                this.selrow = row;
                this.actionindex = "M";
                this.bPageInitLoading = true;
                const res = await this.$tool.request({
                    url: "MNG/MNG2/MNG236",
                    method: "post",
                    data: {
                        action: "his_chargerule_query_detial",
                        chargeid: row.chargeid,
                    },
                });

                if (res.hischargerule.length > 0) {
                    this.detailData = res.hischargerule[0];
                    this.rXTableData = res.hischargeruledetail;
                } else {
                    this.detailData = {};
                    this.rXTableData = [];
                }
                this.tmpdetailData = XEUtils.clone(this.detailData, true);
                this.bPageInitLoading = false;
            } catch (e) {
                this.ErrorCatch(e, "", "error");
                this.bPageInitLoading = false;
            }
        },
        //主键查询  是否重复
        ChkKeyId() {
            this.$tool
                .request({
                    url: "MNG/MNG2/MNG236",
                    method: "post",
                    data: {
                        action: "his_chargerule_chkkeyid",
                        chargecode: this.detailData.chargecode,
                        hospcode: this.detailData.hospcode,
                    },
                })
                .then((res) => {
                    if (res == "1") {
                        this.$alert("药物组合代码重复，请重新填写！");
                        this.$refs.input0.focus();
                    }
                })
                .catch((e) => {
                    this.ErrorCatch(e, "", "error");
                });
        },
        //----------------- 按钮类 -----------------//
        //新增
        btnAdd() {
            this.havedata = true;
            this.bChangeFlag = true;
            this.actionindex = "A";
            this.detailData = {
                chargeid: null,
                chargecode: "",
                chargename: "",
                hospcode: "All",
                inputcode: "",
                description: "",
            };
            this.rXTableData = [];
            this.$refs.input0.focus();
        },
        btnDetailAdd() {
            if (this.havedata) {
                this.$refs.rXTable.insertAt(
                    {
                        chargeid: this.detailData.chargeid,
                        seq: this.autoSeq,
                        chargedept: "1",
                    },
                    -1
                ),
                    this.$refs.rXTable.setActiveRow(this.$refs.rXTable.tableData[this.$refs.rXTable.tableData.length - 1], "med");
                this.$refs.rXTable.scrollToRow(this.$refs.rXTable.tableData[this.$refs.rXTable.tableData.length - 1]);
                this.bChangeFlag = true;
            } else {
                this.$alert("请先新增商品组合！", "信息");
            }
        },
        btnDetailDel() {
            // this.$refs.rXTable.remove(this.$refs.rXTable.getCurrentRow()),
            //                 this.bChangeFlag = true
            try {
                var delrow = this.$refs.rXTable.getCurrentRow();
                if (delrow) {
                    var alld = this.$refs.rXTable.tableData;
                    var rowindex = alld.indexOf(delrow);
                    this.$refs.rXTable.remove(delrow);
                    let havedata = this.$refs.rXTable.tableData;
                    if (havedata.length > 0) {
                        if (rowindex >= havedata.length) rowindex = havedata.length - 1;
                        let selectrow = havedata[rowindex];
                        this.$refs.rXTable.setCurrentRow(selectrow);
                    } else {
                        this.$refs.rXTable.setCurrentRow(null);
                    }
                    this.bChangFlag = true;
                }
            } catch (e) {
                console.log("error", e);
            }
        },
        //删除 -- 弹窗提示
        btnDel() {
            var delrow = this.$refs.lXTable.getCurrentRow();
            this.$confirm('确定删除计划策略名称为<b style="color:red">' + delrow.chargename + "(" + delrow.chargecode + ")" + "</b>的记录吗？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                dangerouslyUseHTMLString: true,
                type: "warning",
            })
                .then(() => {
                    this.actionindex = "D";
                    this.confirmDel();
                })
                .catch((e) => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        //删除 -- 确认删除
        async confirmDel() {
            try {
                var delrow = this.$refs.lXTable.getCurrentRow();
                if (delrow) {
                    var alld = this.$refs.lXTable.tableData;
                    var rowindex = alld.indexOf(delrow);
                    await this.btnSave().then(() => {
                        this.$refs.lXTable.remove(delrow);
                        this.lXTableData.splice(rowindex, 1);
                        let havedata = this.$refs.lXTable.tableData;
                        if (havedata.length > 0) {
                            if (rowindex >= havedata.length) rowindex = havedata.length - 1;
                            let selectrow = havedata[rowindex];
                            this.HightLightRow(selectrow);
                        } else {
                            this.HightLightRow(false);
                        }
                    });
                }
            } catch (e) {
                this.ErrorCatch(e, "", "error");
            }
        },
        //取消 -- 取消操作，数据还原
        btnClear() {
            this.$confirm("您确定要取消这次改动吗？", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.bChangeFlag = false;
                    this.detailQuery(this.selrow);
                })
                .catch((e) => {});
        },
        //保存 -- 保存新增，修改，删除主表: lab_medgroup 子表: lab_medgroupdetail 操作//
        async btnSave() {
            try {
                if (!this.detailData.chargecode) {
                    this.$alert("计划策略代码不能为空！", "提示", {
                        confirmButtonText: "确定",
                        showclose: false,
                    }).then(() => {
                        this.$refs.input0.focus();
                        return false;
                    });
                }
                if (!this.detailData.chargename) {
                    this.$alert("计划策略名称不能为空！", "提示", {
                        confirmButtonText: "确定",
                        showclose: false,
                    }).then(() => {
                        this.$refs.input0.focus();
                        return false;
                    });
                }
                if (!this.detailData.hospcode) {
                    this.$alert("所属医院不能为空！", "提示", {
                        confirmButtonText: "确定",
                        showclose: false,
                    }).then(() => {
                        this.$refs.input0.focus();
                        return false;
                    });
                }

                let data = this.$refs.rXTable.getTableData().fullData;
                data.sort((a, b) => {
                    return a.seq - b.seq;
                });
                for (let i = 0, len = data.length; i < len; i++) {
                    let tempseq = (i + 1) * 10;
                    if (tempseq !== data[i].seq) {
                        data[i].seq = tempseq;
                    }
                    //!data[i].chargeid = this.detailData.chargeid; //修正新增药物组合后，再次修改药物组合代码导致明细项保存错位。
                }
                const res = await this.$tool.request({
                    url: "MNG/MNG2/MNG236",
                    method: "post",
                    timeout: 600000,
                    data: {
                        action: "his_chargerule_save",
                        utype: this.actionindex,
                        oldinfo: this.tmpdetailData,
                        newinfo: this.detailData,
                        hischargeruledetail: this.$refs.rXTable.getRecordset(),
                    },
                });
                if (res.errcode == "1") {
                    this.$message.success("保存成功！");
                    this.bChangeFlag = false;
                    if (this.actionindex == "A") {
                        if (res.chargeid != -1) {
                            if (this.AddData.indexOf(res.chargeid) == -1) this.AddData.push(res.chargeid);
                            this.detailData.chargeid = res.chargeid;
                            this.$refs.lXTable.insert(this.detailData).then(({ row }) => {
                                this.HightLightRow(row);
                                this.lXTableData.push(row);
                            });
                        }
                    } else if (this.actionindex == "M") {
                        if (this.ModData.indexOf(this.detailData.chargeid) == -1) this.ModData.push(this.detailData.chargeid);
                        await this.SetToTable(this.detailData).then((row) => {
                            this.HightLightRow(row);
                        });
                    } else {
                        this.actionindex = "M";
                    }
                } else {
                    this.ErrorCatch(res.errmsg, "保存失败:", "error");
                }
            } catch (e) {
                this.ErrorCatch(e, "", "error");
            }
        },
        //导出
        btnExport() {
            this.$refs.lXTable.exportCsv({
                filename: "MNG236 附加计划策略",
            });
        },
        ErrorCatch(e, msg, type) {
            this.$alert(msg + e, "提示", {
                confirmButtonText: "确定",
                type: type ? type : "error",
            });
        },
        //--------------- 数据改变及其他功能 ---------------//
        //行改变事件
        async CurrentChangeEvent({ row }) {
            if (this.bChangeFlag) {
                this.$refs.lXTable.setCurrentRow(this.selrow);
                return false;
            } else {
                await this.detailQuery(row);
            }
        },
        //保存后不刷新左侧主表,前台赋值。
        SetToTable(obj) {
            return new Promise((s, f) => {
                this.selrow.chargeid = obj.chargeid;
                this.selrow.chargecode = obj.chargecode;
                this.selrow.chargename = obj.chargename;
                this.selrow.inputcode = obj.inputcode;
                this.selrow.hospcode = obj.hospcode;
                this.selrow.description = obj.description;
                s(this.selrow);
                return;
            });
        },
        // 焦点跳转
        NextFocus(index) {
            var focusIndex = index + 1;
            var that = this;
            if (index < 7) {
                setTimeout(function () {
                    if (index == 4 || index == 6) {
                        that.$refs["input" + index].blur();
                    }
                    if (index != 4) {
                        that.$refs["input" + focusIndex].focus();
                    } else {
                        that.$refs["input" + focusIndex].$el.focus();
                    }
                }, 5);
            } else {
                //表单最后一格 回车 跳转明细表
                this.$refs.rXTable.insertAt(
                    {
                        chargeid: this.detailData.chargeid,
                        seq: this.autoSeq,
                        chargedept: "1",
                    },
                    -1
                ),
                    this.$refs.rXTable.setActiveRow(this.$refs.rXTable.getTableData().fullData[this.$refs.rXTable.getTableData().fullData.length - 1], "med");
                this.$refs.rXTable.scrollToRow(this.$refs.rXTable.getTableData().fullData[this.$refs.rXTable.getTableData().fullData.length - 1]);
                this.bChangeFlag = true;
            }
        },
        ActiveMethod({ row }) {
            return true;
        },
        //数据发生改变 -- 按钮禁用/可用切换
        HasChange() {
            this.bChangeFlag = true;
        },
        //获取 申请项目弹窗 行数据
        popGetRow(row) {
            this.tempreqitem = XEUtils.clone(row.req_itemcode);
            this.reqItemRow = row;
            this.bPopReqItem = true;
        },
        //获取输入码
        CreateInputcode() {
            this.detailData.inputcode = this.$pub.CreateInputcode(this.detailData.chargename, this, 16);
        },
        //获取pop 组件 hidecode，hidename
        ReqItemRowChange(c, v) {
            this.reqItemRow.req_itemcode = c;
            this.reqItemRow.req_item = v + "[" + c + "]";
            if (this.tempreqitem != this.reqItemRow.req_itemcode) {
                this.HasChange();
            }
            this.bPopReqItem = false;
            this.$refs.rXTable.setActiveCell(this.reqItemRow, "qty");
        },
        //设置高亮选中行
        async HightLightRow(row) {
            if (!!row) {
                this.havedata = true;
                this.$refs.lXTable.setCurrentRow(row);
                await this.detailQuery(row);
            } else {
                this.havedata = false;
                this.$refs.lXTable.setCurrentRow(null);
                this.detailData = {};
                this.tmpdetailData = {};
                this.rXTableData = [];
            }
        },
        rEditClosed({ row, column }) {
            if (column.property == "chargedept") {
                this.bChangeFlag = true;
            }
        },
        Focus(event) {
            //点击触发文本内容全选
            event.currentTarget.select();
        },
        //----------------- class -----------------//
        //左侧主表 class
        lRowClassName({ row, rowIndex }) {
            if (this.AddData.indexOf(row.chargeid) > -1) {
                return "row-new";
            }
            if (this.ModData.indexOf(row.chargeid) > -1) {
                return "row-modify";
            }
        },
        //右侧子表 class
        rRowClassName({ row, rowIndex }) {
            if (this.$refs.rXTable.hasRowInsert(row)) {
                return "row-new";
            }
            if (this.$refs.rXTable.hasRowChange(row)) {
                return "row-modify";
            }
        },
        rCellClassName({ column, row }) {
            if (column.property == "chargeid") {
                return "col-readonly";
            }
        },
    },
};
</script>

<style scoped>
table {
    font-size: 12px;
    border-collapse: separate;
    border-spacing: 5px;
}
.top-title {
    margin: 0 3px 0 20px;
    font-size: 12px;
}
.top-button {
    right: 5px;
    position: absolute;
    top: 5px;
    display: flex;
    align-items: center;
}
.pagetop {
    width: 100%;
    height: 35px;
    display: -webkit-box;
    -webkit-box-pack: left;
    -webkit-box-align: center;
    border: 1px solid #ccc;
    position: absolute;
    z-index: 99;
}
.pagecenter {
    position: absolute;
    top: 40px;
    width: 100%;
    left: 0;
    bottom: 0px;
    overflow: auto;
}
.detailxTable {
}
.detail-operation {
    display: flex;
    padding: 0px 2px 0px 5px;
    margin: 5px 0;
}
/deep/.el-textarea__inner {
    display: block;
    resize: vertical;
    padding: 2px 4px;
}
/deep/ .el-button.is-disabled {
    border: 0px;
    color: grey;
    background-color: #e6e6e6;
    font-weight: normal;
}
/deep/ tr.vxe-body--row.row-modify {
    color: blue;
}
/deep/ tr.vxe-body--row.row-new {
    color: #cc6600;
}
/deep/ .col-readonly {
    background-color: #eeeeee;
}
/deep/.el-checkbox__input.is-disabled + span.el-checkbox__label {
    color: #000000;
    cursor: not-allowed;
}
/deep/.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
    border-color: #000000;
}
/deep/ .el-checkbox__input.is-disabled .el-checkbox__inner,
.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner + .el-input.is-disabled .el-input__inner {
    background-color: #ffffff !important;
}
.tableStyle tr td {
    padding: 0px 2px 0px 2px;
}
</style>
